---
import BaseLayout from "./BaseLayout.astro"
// 当你在一个 .md 文件中包含 layout frontmatter 属性时，你可以在布局文件中使用所有 frontmatter YAML 的值。
const { frontmatter } = Astro.props
---

<BaseLayout pageTitle={frontmatter.title}>
  <!-- <meta charset="utf-8" /> -->
  <!-- <h1>{frontmatter.title}</h1> -->
  <p>作者：{frontmatter.author }。发布时间：{frontmatter.pubDate.toString().slice(0,10)}。</p>
  <!-- <p>作者：{frontmatter.author}</p>
  <p>发布于：{frontmatter.pubDate.toString().slice(0,10)}</p> -->
  <p><em>{frontmatter.description}</em></p>
  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
  
  <div class="tags">
    {frontmatter.tags.map((tag: any) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>

  <slot />
</BaseLayout>

<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>